<template>
  <el-row>
    <!-- 左侧表格，显示输入列名和类型 -->
    <el-col :span="8">
      <el-table
        ref="leftTable"
        :data="remainCol"
        row-key="name"
        style="wide: 100%"
        height="400"
        :row-style="{ height: '10px' }"
        :cell-style="{ padding: '5px 0' }"
        @selection-change="handleLeftSelection"
      >
        <el-table-column type="selection" :reserve-selection="true" />
        <el-table-column label="列名" width="180" prop="name" />
        <el-table-column
          label="类型"
          width="80"
          prop="type"
          :filters="filters"
          :filter-method="handleFilter"
        />
      </el-table>
    </el-col>
    <!-- 右侧表格 -->
    <el-col :span="14">
      <el-row>
        <el-col :span="4">
          <div class="button-container">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-d-arrow-right"
              circle
              @click="addFeatures"
            />
          </div>
        </el-col>
        <el-col :span="20">
          <el-table
            :data="features"
            row-key="name"
            style="wide: 100%"
            height="200"
            :row-style="{ height: '10px' }"
            :cell-style="{ padding: '5px 0' }"
          >
            <el-table-column label="特征列">
              <el-table-column label="列名" width="180" prop="name" />
              <el-table-column label="类型" width="80" prop="type" />
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteFeature(scope.$index)">
                    删除</el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="button-container">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-d-arrow-right"
              circle
              @click="addLabels"
            />
          </div>
        </el-col>
        <el-col :span="20">
          <el-table
            row-key="name"
            :data="labels"
            style="wide: 100%"
            height="200"
            :row-style="{ height: '10px' }"
            :cell-style="{ padding: '5px 0' }"
          >
            <el-table-column label="标签列">
              <el-table-column label="列名" width="180" prop="name" />
              <el-table-column label="类型" width="80" prop="type" />
              <el-table-column label="操作" width="80">
                <template #default="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteLabel(scope.$index)">
                    删除</el-button>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: ['inputData', 'labels', 'features'],
  data() {
    return {
      leftSelection: [],
      filters: []
    }
  },
  computed: {
    // 排除label和feature的剩余选项
    remainCol: function() {
      return this.inputData.filter(
        item =>
          !this.features.some(
            config => config.name === item.name
          ) &&
          !this.labels.some(
            config => config.name === item.name
          )
      )
    }
  },
  created() {
    // 构建filter
    this.inputData.forEach(inputItem => {
      if (
        !this.filters.some(filterItem => filterItem.value === inputItem.type)
      ) {
        this.filters.push({
          text: inputItem.type,
          value: inputItem.type
        })
      }
    })
  },
  methods: {
    handleLeftSelection(val) {
      this.leftSelection = val
    },
    handleFilter(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
    addFeatures() {
      let currentFeatures = this.features.slice()
      currentFeatures = currentFeatures.concat(this.leftSelection)
      this.$refs.leftTable.clearSelection()
      this.$emit('feature-change', currentFeatures)
    },
    addLabels() {
      let currentLabels = this.labels.slice()
      currentLabels = currentLabels.concat(this.leftSelection)
      this.$refs.leftTable.clearSelection()
      this.$emit('label-change', currentLabels)
    },
    deleteFeature(index) {
      const currentFeatures = this.features.slice()
      currentFeatures.splice(index, 1)
      this.$emit('feature-change', currentFeatures)
    },
    deleteLabel(index) {
      const currentLabels = this.labels.slice()
      currentLabels.splice(index, 1)
      this.$emit('label-change', currentLabels)
    }
  }
}
</script>

<style scoped>
.button-container {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
</style>
